<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FoodKa</title>
    <base href="<%=basePath%>">
    <!--fivicon icon-->
<%--    <link rel="icon" href="${pageContext.request.contextPath}/assets/img/fevicon.png">--%>
    <!-- Stylesheet -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/animate.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/magnific.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/jquery-ui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/nice-select.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/owl.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/slick-slide.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/remixicon/remixicon.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/font_3780032_60lycre20q/iconfont.css">
    <link rel="shortcut icon" href="#"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <%--    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>

    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800&family=Bebas+Neue&family=Satisfy&family=Quattrocento:wght@400;700&display=swap"
          rel="stylesheet">
    <%--    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>--%>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <%--    <script type="text/javascript" src="src/main/webapp/backgroundDate/Js/jquery-1.11.3.js"></script>--%>
    <%--    <script type="text/javascript" src="js/jsEmail.js"></script>--%>
    <style>
        .userphone {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 10px;
        }

        .userphone img {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            left: 10px;
        }

        .user_data {
            display: none;
            position: absolute;
            text-align: left;
            width: 210px;
            margin: 0;
            padding: 0;
            list-style: none;
            left: 0;
            top: 100%;
            background-color: #fff;
            border-radius: 0;
        }

        .userphone:hover .user_data {
            display: inline-block;
        }

        .user_data:hover {
            display: inline-block;
        }

        .user_data div {
            margin-left: 5px;
            display: block;
            margin-left: 0;
            line-height: 22px;
            font-size: 15px;
            border-bottom: 1px solid #f5f5f5;
            color: #050a30;
            font-weight: 500;
            height: 40px;
        }

        .teet {
            display: block;
            padding: 10px 20px;
            color: #050a30;
            font-size: 14px;
            font-weight: 500;
            position: relative;
        }


        .title {
            height: 45px;
            line-height: 45px;
            text-align: center;
            border-bottom: 1px solid #DCDCDC;
            position: relative;
            cursor: move;
            font-size: 18px;
            color: black;
        }

        .title2 {
            height: 45px;
            line-height: 45px;
            text-align: center;
            border-bottom: 1px solid #DCDCDC;
            position: relative;
            cursor: move;
            font-size: 18px;
            color: black;
        }

        .content p {
            text-align: center;
            margin-top: 20px;
        }

        .content p:nth-child(3) {
            position: relative;
            left: 10px;
        }

        .title a {
            display: block;
            position: fixed;
            top: 2px;
            right: 5px;
            z-index: 9999;
        }

        .title2 a {
            display: block;
            position: fixed;
            top: 2px;
            right: 5px;
            z-index: 9999;
        }

        .bg {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            z-index: 9998;
            display: none;
        }

        .login {
            width: 600px;
            height: 340px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            background: #fff;
            display: none;

        }

        .login2 {
            width: 600px;
            height: 340px;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
            background: #fff;
            display: none;

        }

        .userbth {
            background-color: #00a1d6;
            color: #fff;
            box-sizing: border-box;
            width: 100px;
            height: 40px;
            border-radius: 8px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            border: 1px white solid;
            margin-right: 35px;
        }

        .userbthzc {
            background-color: white;
            color: black;
            box-sizing: border-box;
            width: 100px;
            height: 39px;
            border-radius: 8px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            border: 1px grey solid;
            margin-left: 30px;
        }

        .username {
            width: 300px;
            background-color: #E8F0FE;
            color: black;
            box-sizing: border-box;
            height: 40px;
            border-radius: 8px;
            line-height: 40px;
            font-size: 14px;
            cursor: pointer;
            border: 0px;
        }

        .passwd {
            width: 300px;
            background-color: #E8F0FE;
            color: black;
            box-sizing: border-box;
            height: 40px;
            border-radius: 8px;
            line-height: 40px;
            font-size: 14px;
            cursor: pointer;
            border: 0px;

        }

        #code {
            width: 200px;
            background-color: #E8F0FE;
            color: black;
            box-sizing: border-box;
            height: 40px;
            border-radius: 8px;
            line-height: 40px;
            font-size: 14px;
            cursor: pointer;
            border: 0px;
        }

        #btnGetCode {
            background-color: #00a1d6;
            color: #fff;
            box-sizing: border-box;
            width: 100px;
            height: 40px;
            border-radius: 8px;
            line-height: 36px;
            text-align: center;
            font-size: 14px;
            cursor: pointer;
            border: 1px white solid;
            margin-right: 35px;
        }


        .aaaaaa p a {
            margin: 0;
            font-size: 10px;
            color: skyblue;
        }

        .aaaaaa p {
            font-size: 10px;
            margin: 0;
        }

        #close img {
            width: 20px;
            height: 20px;
        }

        #close {
            top: -5px;
        }

        #close2 img {
            width: 20px;
            height: 20px;
        }

        #close2 {
            top: -5px;
        }
        @media (max-width: 800px) {
            .userphone img{
                display: inline-block;
                width: 45px;
                height: 45px;
                border-radius: 30px;
                margin-top: 7px;
                left: 0px;
            }
            .bg {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0px;
                left: 0px;
                z-index: 9998;
                display: none;
            }




            .login {
                width: 80%;
                height: 45%;
                position: fixed;
                top: 50%;
                /*left: 50%;*/
                transform: translate(-50%, -50%);
                z-index: 9999;
                background: #fff;
                display: none;

            }

            .login2 {
                width: 80%;
                height: 45%;
                position: fixed;
                top: 50%;
                /*left: 50%;*/
                transform: translate(-50%, -50%);
                z-index: 9999;
                background: #fff;
                display: none;

            }

            .userbth {
                background-color: #00a1d6;
                color: #fff;
                box-sizing: border-box;
                width: 30%;
                height: 40px;
                border-radius: 8px;
                line-height: 36px;
                text-align: center;
                font-size: 14px;
                cursor: pointer;
                border: 1px white solid;
                margin-right: 5px;
            }

            .userbthzc {
                background-color: white;
                color: black;
                box-sizing: border-box;
                width: 30%;
                height: 39px;
                border-radius: 8px;
                line-height: 40px;
                text-align: center;
                font-size: 14px;
                cursor: pointer;
                border: 1px grey solid;
                margin-left: 5px;
            }

            .username {
                width: 60%;
                background-color: #E8F0FE;
                color: black;
                box-sizing: border-box;
                height: 40px;
                border-radius: 8px;
                line-height: 40px;
                font-size: 14px;
                cursor: pointer;
                border: 0px;
            }

            .passwd {
                width: 60%;
                background-color: #E8F0FE;
                color: black;
                box-sizing: border-box;
                height: 40px;
                border-radius: 8px;
                line-height: 40px;
                font-size: 14px;
                cursor: pointer;
                border: 0px;

            }

            #code {
                width: 40%;
                background-color: #E8F0FE;
                color: black;
                box-sizing: border-box;
                height: 40px;
                border-radius: 8px;
                line-height: 40px;
                font-size: 14px;
                cursor: pointer;
                border: 0px;
            }

            #btnGetCode {
                background-color: #00a1d6;
                color: #fff;
                box-sizing: border-box;
                width: 30%;
                height: 40px;
                border-radius: 8px;
                line-height: 36px;
                text-align: center;
                font-size: 14px;
                cursor: pointer;
                border: 1px white solid;
                margin-right: 5px;
            }
        }

    </style>



</head>

<body class='sc5' οnlοad="opener.location.reload()">
<!-- preloader area start -->
<div class="preloader" id="preloader">
    <div class="preloader-inner">
        <div id="wave1">
        </div>
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
</div>
<!-- preloader area end -->

<!-- search popup area start -->
<div class="body-overlay" id="body-overlay"></div>
<div class="td-search-popup" id="td-search-popup">
    <form action="index.jsp" class="search-form">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="Search.....">
        </div>
        <button type="submit" class="submit-btn"><i class="fa fa-search"></i></button>
    </form>
</div>
<!-- //. search Popup -->

<!-- navbar start -->
<header class="navbar-area">
    <nav class="navbar navbar-expand-lg">
        <div class="container nav-container">
            <div class="responsive-mobile-menu">
                <button class="menu toggle-btn d-block d-lg-none" data-target="#themefie_main_menu"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="icon-left"></span>
                    <span class="icon-right"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="themefie_main_menu">
                <ul class="navbar-nav menu-open">
                    <li class="current-menu-item menu-item-has-children">
                        <a href="home-1.jsp">HOME</a>
                        <ul class="sub-menu ps-0">
                            <li><a href="home-1.jsp">Home 01</a></li>
                        </ul>
                    </li>
                    <li class="current-menu-item menu-item-has-children">
                        <a href="#">页面</a>
                        <ul class="sub-menu ps-0">
                            <li><a href="about.jsp">关于</a></li>
                            <li><a href="/news.let?type=listNews&pageIndex=1">博客</a></li>
                            <li><a href="blog-details.jsp">博客详细信息</a></li>
                            <li><a href="foods.let?type=findall">菜单</a></li>
                            <li><a href="foods.let?type=menuList&pageIndex=1">菜单列表</a></li>
                            <li><a href="shop.let?type=findShop&pageIndex=1">店铺</a></li>
                            <li><a href="foods.let?type=findCart&userId=${user.id}" onclick="jiaru()">购物车</a></li>
                            <li><a href="Order.let?type=listOrderById&userId=${user.id}">Checkout</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="about.jsp">关于我们</a>
                    </li>
                    <li>
                        <a href="contact.jsp">联系人</a>
                    </li>
                </ul>
            </div>
            <div class="logo">
                <a class="main-logo" href="home-1.jsp"><img src="${pageContext.request.contextPath}/assets/img/logo.png"
                                                            alt="img"></a>
            </div>
            <div class="nav-right-part nav-right-part-mobile">
                <ul>
                    <li><a class="search" href="#"><i class="ri-search-line"></i></a>
                    </li>
                    <li class="phone-contact d-md-block d-none"><i class="ri-phone-fill float-start"></i> +997 509 153
                        849
                    </li>
                    <li class="menu-cart"><a href="foods.let?type=findCart&userId=${user.id}">购物车 <span>${cartNum}</span></a></li>
                    <li class="userphone">
                        <c:if test="${user==null||user.id==-1}">
                            <a href="javascript:;" id="loginA1">
                                <img src="${pageContext.request.contextPath}/assets/img/img.png">
                            </a>
                        </c:if>
                        <c:if test="${user!=null&&user.id!=-1}">
                            <a href="javascript:;" id="loginA1" style="display: none">
                                <img src="${pageContext.request.contextPath}/assets/img/img.png">
                            </a>
                            <img src="${pageContext.request.contextPath}${user.image}">
                            <input type="hidden" id="userId" value="${user.id}">
                            <div class="user_data">
                                <div><a href="PersonalCenter/main.jsp" class="teet">个人中心</a></div>
                                <div><a href="login.let?type=exit" class="teet">退出</a></div>
                            </div>
                        </c:if>
                    </li>
                </ul>
            </div>
            <div class="nav-right-part nav-right-part-desktop">
                <ul>
                    <li><a class="search" href="#"><i class="ri-search-line"></i></a>
                    </li>
                    <li class="phone-contact"><i class="ri-phone-fill float-start"></i> +997 509 153 849
                    </li>
                    <li class="menu-cart"><a href="foods.let?type=findCart&userId=${user.id}">购物车 <span>${cartNum}</span></a></li>
                    <li class="userphone">
                        <c:if test="${user==null||user.id==-1}">
                            <a href="javascript:;" id="loginA">
                                <img src="${pageContext.request.contextPath}/assets/img/img.png">
                            </a>
                        </c:if>
                        <c:if test="${user!=null&&user.id!=-1}">
                            <a href="javascript:;" id="loginA" style="display: none">
                                <img src="${pageContext.request.contextPath}/assets/img/img.png">
                            </a>
                            <img src="${pageContext.request.contextPath}${user.image}">
                            <input type="hidden" id="userId" value="${user.id}">
                            <div class="user_data">
                                <div><a href="PersonalCenter/main.jsp" class="teet">个人中心</a></div>
                                <div><a href="login.let?type=exit" class="teet">退出</a></div>
                            </div>
                        </c:if>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</header>


<div class="login">
    <div class="title">
        账号登录 <a href="javascript:void(0);" id="close"><img src="assets/img/img_3.png"></a>
    </div>
    <form action="/login.let?type=login" method="post">
        <div class="content">
            <p> 邮箱：<input type="text" value="" class="username" name="username" placeholder="请输入QQ邮箱"/></p>
            <p> 密码：<input type="password" value="" class="passwd" name="password" placeholder="请输入密码"/></p>
            <p><input type="submit" value="提交" class="userbth"/>
                <input value="注册" id="beaten" class="userbthzc"/>
            <div class="aaaaaa">
                <p>未注册过的邮箱账号，我们将自动帮你注册账号</p>
                <p>登录或完成注册即代表你同意
                    <a href=""> 用户协议 </a>和
                    <a href=""> 隐私政策 </a>
                </p>
            </div>
        </div>
    </form>
</div>
<div class="bg">

</div>

<div class="login2">
    <div class="title2">
        账号注册 <a href="javascript:;" id="close2"><img src="assets/img/img_3.png"></a>
    </div>
    <form name="form1" AUTOCOMPLETE="OFF">
        <div class="content">

            <p> 邮箱：<input type="text" value="" class="username" id="username" name="emailName" placeholder="请输入QQ邮箱">
                <input type="hidden" id="email" name="email" value="">
            </p>
            <p> 密码：<input type="password" value="" class="passwd" id="password" name="password" placeholder="请输入密码"/>
            </p>
            <p> 验证码： <input type="text" id="code" name="code">
                <button type="button" id="btnGetCode" style="cursor:pointer">发送验证码</button>
                <i id="message" style="position: absolute;right: 20px;top: 5px"></i>
            </p>
            <p>
                <input id="btnVerify" disabled value="登录/注册" class="userbthzc" style="cursor:pointer"/>
            </p>

            <div class="aaaaaa">
                <p>未注册过的邮箱账号，我们将自动帮你注册账号</p>
                <p>登录或完成注册即代表你同意
                    <a href=""> 用户协议 </a>和
                    <a href=""> 隐私政策 </a>
                </p>
            </div>
        </div>
    </form>
</div>
<div class="bg">

</div>
<script>

    var time0 = 60;
    var time = time0;
    var t;  // 用于验证按钮的60s计时


    $(document).ready(function () {
        // 获取验证码按钮
        $("#btnGetCode").click(function () {
            var btnGet = document.getElementById("btnGetCode");
            let username=$("#username").val()
            btnGet.disabled = true;  // 为了防止多次点击
            $.ajax({
                url: 'EmailServlet?method=getVCode',
                type: 'post',
                data: {email: username},
                dataType: 'text',
                success: function (mgc) {
                    console.log(mgc);
                    if (mgc === "no") {
                        window.alert("请输入正确的邮箱！");
                        btnGet.disabled = false;
                    } else {
                        $("#email").val(mgc)
                        useChangeBTN();  // 控制下一次重新获取验证码
                    }
                },
                error: function (data) {
                }
            });
        });

        $("#btnVerify").click(function () {
            let emailName = $("#username").val();
            let password = $("#password").val();
            let code = $("#code").val();
            let email=$("#email").val();
                $.ajax({
                    url: 'login.let?type=resLogin',
                    type: 'post',
                    data: {
                        emailName: emailName,
                        password: password,
                        code: code,
                        email:email
                    },
                    datatype: 'text',
                    success: function (data) {
                        if (data === "yes") {
                            alert("注册成功！")
                            window.location.href = "home-1.jsp";
                        } else if (data === "no") {
                            alert("注册失败！")
                        }else  if(data==="zz"){
                            alert("请输入正确的验证码接收邮箱")
                        }
                        else {
                            alert("该邮箱已注册，若有需要请联系管理员找回密码!")
                        }
                    },
                    error: function (mgc) {
                    }
                });
        });

        // 验证按钮
        $("#code").blur(function () {
            let code = $("#code").val().trim();
            var message = document.getElementById("message");  // 显示提示信息
            if (code !== " ") {
                $.ajax({
                    url: 'EmailServlet?method=verify',
                    type: 'post',
                    data: {vcode: $("input[name='code']").val()},
                    dataType: 'text',
                    success: function (mac) {
                        if (mac === "yes") {
                            message.innerHTML = "验证码正确！";
                            $("#message").css("color", "green");
                            $("#btnVerify").removeAttr("disabled")
                        } else {
                            message.innerHTML = "验证码错误！";
                            $("#message").css("color", "red");
                            $("#btnVerify").attr("disabled", true)
                        }
                    },
                    error: function (mac) {
                    }
                });
            }
        });
    });

    //修改按钮，控制验证码重新获取
    function changeBTN() {
        if (time > 0) {
            $("#btnGetCode").text("(" + time + "s)" + "重新获取");
            time = time - 1;
        } else {
            var btnGet = document.getElementById("btnGetCode");
            btnGet.disabled = false;
            $("#btnGetCode").text("获取验证码");
            clearInterval(t);
            time = time0;
        }
    }

    function useChangeBTN() {
        $("#btnGetCode").text("(" + time + "s)" + "重新获取");
        time = time - 1;
        t = setInterval("changeBTN()", 1000);  // 1s调用一次
    }


</script>

<SCRIPT>
    var loginA = document.querySelector('#loginA');
    var loginA1 = document.querySelector('#loginA1');
    var title = document.querySelector('.title');
    var title2 = document.querySelector('.title2');
    var close = document.querySelector('#close');
    var close2 = document.querySelector('#close2')
    var bg = document.querySelector('.bg');
    var login = document.querySelector('.login');
    var login2 = document.querySelector('.login2')
    var username = document.querySelector('.username');
    var rusername = document.querySelector('.rusername');
    var iusername = document.querySelector('#iusername');
    var beaten = document.querySelector('#beaten');
    <%--var withs=window.innerWidth;--%>
    <%--var user="${user.id}";--%>
    <%--if(user>0){--%>
    <%--    bg.style.display = 'none';--%>
    <%--    login.style.display = 'none';--%>
    <%--}else if(withs>500){--%>
    <%--    bg.style.display = 'none';--%>
    <%--    login.style.display = 'none';--%>
    <%--}else {--%>
    <%--    bg.style.display = 'block';--%>
    <%--    login.style.display = 'block';--%>
    <%--}--%>

    loginA.onclick = function () {
        bg.style.display = 'block';
        login.style.display = 'block';
    }

    loginA1.onclick = function () {
        bg.style.display = 'block';
        login.style.display = 'block';
    }

    close.onclick = function () {
        bg.style.display = 'none';
        login.style.display = 'none';
    }

    beaten.onclick = function () {
        bg.style.display = 'block';
        login2.style.display = 'block';
    }

    close2.onclick = function () {
        bg.style.display = 'none';
        login2.style.display = 'none';
    }

    title.addEventListener('mousedown', function (e) {
        var x = e.pageX - login.offsetLeft;
        var y = e.pageY - login.offsetTop;
        document.addEventListener("mousemove", move)

        function move(e) {
            var newx = e.pageX - x;
            var newy = e.pageY - y;
            login.style.left = newx + 'px';
            login.style.top = newy + 'px';
        }

        document.addEventListener('mouseup', function (e) {
            document.removeEventListener("mousemove", move);
        })
    })


    title2.addEventListener('mousedown', function (e) {
        var z = e.pageX - login2.offsetLeft;
        var c = e.pageY - login2.offsetTop;
        document.addEventListener("mousemove", move)

        function move(e) {
            var newx2 = e.pageX - z;
            var newy2 = e.pageY - c;
            login2.style.left = newx2 + 'px';
            login2.style.top = newy2 + 'px';
        }

        document.addEventListener('mouseup', function (e) {
            document.removeEventListener("mousemove", move);
        })
    })


</SCRIPT>
<!-- navbar end -->

<!-- Banner Area Start-->
<section class="banner-area">
    <div class="banner-thumb">
        <img src="${pageContext.request.contextPath}/assets/img/banner/banner.png" alt="img">
    </div>
    <div class="banner-bg-img"></div>
    <div class="banner-shape-1"><img src="${pageContext.request.contextPath}/assets/img/banner/shape-1.png" alt="img">
    </div>
    <div class="banner-shape-2"><img src="${pageContext.request.contextPath}/assets/img/banner/shape-2.png" alt="img">
    </div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8 align-self-center">
                <div class="banner-inner text-center">
                    <h3>别错过！</h3>
                    <h1>披萨的味道比瘦肉精的味道好.</h1>
                    <a class="btn btn-secondary" href="shop.jsp">现在就得到</a>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- populer Area Start-->
<section class="populer-area pd-bottom-90">
    <div class="container">
        <div class="row justify-content-center">
            <div class="aaaa" style="height: 50px">

            </div>
            <div class="col-12">
                <div class="section-title text-center">
                    <h3 class="sub-title">我们的签名</h3>
                    <h2 class="title">受欢迎的菜肴</h2>
                </div>
            </div>
        </div>
        <div class="row justify-content-center" id="foodsWrap">
            <c:forEach items="${lovethree}" var="f">
                <div class="col-lg-4 col-md-6">
                    <div class="single-item-wrap">
                        <div class="thumb" id="thumb">
                            <img src="${f.photo}" alt="img">
                            <c:set var="bian" value="0"/>
                            <c:forEach items="${love}" var="love">
                                <c:if test="${love.customer_id == user.id && love.food_id == f.ID}">
                                    <c:set var="bian" value="1"/>
                                </c:if>
                            </c:forEach>
                            <c:if test="${bian == '1'}">
                                <a class="fav-btn" href="javascript:void(0)" id="${f.ID}">
                                    <span class="iconfont icon-aixin1"></span>
                                </a>
                            </c:if>
                            <c:if test="${bian == '0'}">
                                <a class="fav-btn" href="javascript:void(0)" id="${f.ID}">
                                    <span class="iconfont icon-aixin"></span>
                                </a>
                            </c:if>
                        </div>
                        <div class="wrap-details">
                            <h5>
                                <a href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">${f.name}</a>
                            </h5>
                            <div class="wrap-footer">
                                <div class="rating" id="rating${f.ID}">
                                    4.9
                                    <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                    <c:forEach items="${likes}" var="l">
                                        <c:if test="${l.food_id==f.ID}">
                                            <p>(<span id="likeNum${f.ID}">${f.like}</span>)</p>
                                        </c:if>
                                    </c:forEach>
                                </div>
                                <h6 class="price">$${f.price}</h6>
                            </div>
                        </div>
                        <div class="btn-area">
                            <a class="btn btn-secondary"
                               href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">选择选项</a>
                        </div>
                    </div>
                </div>
            </c:forEach>
        </div>
    </div>
</section>
<!-- populer Area End -->

<!-- featured Area Start-->
<section class="featured-area pd-bottom-150"
         style="background-image: url(${pageContext.request.contextPath}/assets/img/other/featured.png);">
    <div class="overlay"></div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="section-title text-center">
                    <h3 class="sub-title text-secondary">美味的新产品</h3>
                    <h2 class="title text-white">满足您的新午餐时间最爱</h2>
                    <a class="btn btn-base" href="/foods.let?type=findall">查看所有菜单</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- featured Area End -->

<!-- about Area Start-->
<section class="about-area pd-top-120 pd-bottom-90">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-6">
                <div class="thumb mb-lg-0 mb-4">
                    <img src="${pageContext.request.contextPath}/assets/img/other/about.png" alt="img">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="section-title text-lg-start text-center">
                    <h3 class="sub-title">为什么选择我们</h3>
                    <h2 class="title">为什么我们是最好的</h2>
                    <p>
                        在这里，我们可以看到，在我们的生活中，有很多人都在为我们的生活而努力，有很多人都在为我们的生活而努力，有很多人都在为我们的生活而努力。在这一点上，我们可以看到，我们有一个很好的解决方案。在这一过程中，我们可以看到，在这一过程中，我们可以看到，在这一过程中，我们可以看到，在这一过程中，我们可以看到，在这一过程中，我们可以看到。他说："我是一个很好的人。他想提供汉堡包、薯条和饮料。
                        薯条和饮料的味道。</p>
                </div>
                <div class="row">
                    <div class="col-sm-6">
                        <div class="single-about-wrap">
                            <img src="${pageContext.request.contextPath}/assets/img/icon/1.png" alt="img">新鲜食品
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="single-about-wrap">
                            <img src="${pageContext.request.contextPath}/assets/img/icon/2.png" alt="img"> 交货快
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="single-about-wrap">
                            <img src="${pageContext.request.contextPath}/assets/img/icon/3.png" alt="img"> 质量保持
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="single-about-wrap">
                            <img src="${pageContext.request.contextPath}/assets/img/icon/4.png" alt="img"> 24/7服务
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- about Area End -->
<!-- product Area Start-->
<section class="product-area pd-bottom-90">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="section-title text-center">
                    <h3 class="sub-title">我们的签名</h3>
                    <h2 class="title">美味餐的美味交易</h2>
                </div>
                <ul class="product-nav nav nav-pills" id="pills-tab" role="tablist">

                    <c:forEach items="${types}" var="typeList">
                        <c:if test="${typeList.id==1}">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="pills-ramen-tab${typeList.id}" data-bs-toggle="pill"
                                        data-bs-target="#pills-ramen" type="button" role="tab"
                                        aria-controls="pills-ramen" aria-selected="true" value="${typeList.id}"><img
                                        src="${typeList.photo}" alt="img">${typeList.name}</button>
                            </li>
                        </c:if>
                        <c:if test="${typeList.id!=1}">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link" id="pills-ramen-tab${typeList.id}" data-bs-toggle="pill"
                                        data-bs-target="#pills-pizza" type="button" role="tab"
                                        aria-controls="pills-pizza" aria-selected="false" value="${typeList.id}"><img
                                        src="${typeList.photo}" alt="img">${typeList.name}</button>
                            </li>
                        </c:if>
                        <script>
                            $(function () {
                                $("#pills-ramen-tab${typeList.id}").click(function () {
                                    let aa = $("#pills-ramen-tab${typeList.id}").val();
                                    if (aa == 1) {
                                        $("#ramen").addClass("show active ");
                                        $("#pizza").removeClass("show active ");
                                        $("#burger").removeClass("show active ");
                                        $("#french-fry").removeClass("show active ");
                                        $("#fast-food").removeClass("show active ");
                                        $("#drinks").removeClass("show active ");
                                    } else if (aa == 2) {
                                        $("#ramen").removeClass("show active  ");
                                        $("#pizza").addClass("show active ");
                                        $("#burger").removeClass("show active  ");
                                        $("#french-fry").removeClass("show active ");
                                        $("#fast-food").removeClass("show active  ");
                                        $("#drinks").removeClass("show active ");
                                    } else if (aa == 3) {
                                        $("#ramen").removeClass("show active ");
                                        $("#pizza").removeClass("show active ");
                                        $("#burger").addClass("show active ");
                                        $("#french-fry").removeClass("show active  ");
                                        $("#fast-food").remove("show active ");
                                        $("#drinks").removeClass("show active ");
                                    } else if (aa == 4) {
                                        $("#ramen").removeClass("show active ");
                                        $("#pizza").removeClass("show active ");
                                        $("#burger").removeClass("show active ");
                                        $("#french-fry").addClass("show active ");
                                        $("#fast-food").removeClass("show active ");
                                        $("#drinks").removeClass("show active ");
                                    } else if (aa == 5) {
                                        $("#ramen").removeClass("show active ");
                                        $("#pizza").removeClass("show active ");
                                        $("#burger").removeClass("show active ");
                                        $("#french-fry").removeClass("show active ");
                                        $("#fast-food").addClass("show active ");
                                        $("#drinks").removeClass("show active ");
                                    } else if (aa == 6) {
                                        $("#ramen").removeClass("show active ");
                                        $("#pizza").removeClass("show active ");
                                        $("#burger").removeClass("show active ");
                                        $("#french-fry").removeClass("show active ");
                                        $("#fast-food").removeClass("show active ");
                                        $("#drinks").addClass("show active ");
                                    }
                                })
                            })
                        </script>
                    </c:forEach>

                </ul>
            </div>
        </div>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="ramen" role="tabpanel" aria-labelledby="pills-ramen-tab">
                <div class="row justify-content-center">
                    <c:forEach items="${foods}" var="f">
                        <c:if test="${f.type_id==1}">
                            <div class="col-lg-4 col-md-6">
                                <div class="single-item-wrap">
                                    <div class="thumb">
                                        <img src="${f.photo}" alt="img">
                                        <c:set var="bian" value="0"/>
                                        <c:forEach items="${love}" var="love">
                                            <c:if test="${love.customer_id == user.id && love.food_id == f.ID}">
                                                <c:set var="bian" value="1"/>
                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${bian == '1'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin1"></span>
                                            </a>
                                        </c:if>
                                        <c:if test="${bian == '0'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin"></span>
                                            </a>
                                        </c:if>
                                    </div>
                                    <div class="wrap-details">
                                        <h5>
                                            <a href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">${f.name}</a>
                                        </h5>
                                        <div class="wrap-footer">
                                            <div class="rating" id="rating${f.ID}">
                                                4.9
                                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                                <c:forEach items="${likes}" var="l">
                                                    <c:if test="${l.food_id==f.ID}">
                                                        <p>(<span id="likeNum${f.ID}">${f.like}</span>)</p>
                                                    </c:if>
                                                </c:forEach>
                                            </div>
                                            <h6 class="price">$${f.price}</h6>
                                        </div>
                                    </div>
                                    <div class="btn-area">
                                        <a class="btn btn-secondary"
                                           href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">选择选项</a>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
            <div class="tab-pane fade" id="pizza" role="tabpanel" aria-labelledby="pills-pizza-tab">
                <div class="row justify-content-center">
                    <c:forEach items="${foods}" var="f">
                        <c:if test="${f.type_id==2}">
                            <div class="col-lg-4 col-md-6">
                                <div class="single-item-wrap">
                                    <div class="thumb">
                                        <img src="${f.photo}" alt="img">
                                        <c:set var="bian" value="0"/>
                                        <c:forEach items="${love}" var="love">
                                            <c:if test="${love.customer_id == user.id && love.food_id == f.ID}">
                                                <c:set var="bian" value="1"/>
                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${bian == '1'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin1"></span>
                                            </a>
                                        </c:if>
                                        <c:if test="${bian == '0'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin"></span>
                                            </a>
                                        </c:if>
                                    </div>
                                    <div class="wrap-details">
                                        <h5>
                                            <a href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">${f.name}</a>
                                        </h5>
                                        <div class="wrap-footer">
                                            <div class="rating" id="rating${f.ID}">
                                                4.9
                                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                                <c:forEach items="${likes}" var="l">
                                                    <c:if test="${l.food_id==f.ID}">
                                                        <p>(<span id="likeNum${f.ID}">${f.like}</span>)</p>
                                                    </c:if>
                                                </c:forEach>
                                            </div>
                                            <h6 class="price">$${f.price}</h6>
                                        </div>
                                    </div>
                                    <div class="btn-area">
                                        <a class="btn btn-secondary"
                                           href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">选择选项</a>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
            <div class="tab-pane fade" id="burger" role="tabpanel" aria-labelledby="pills-burger-tab">
                <div class="row justify-content-center">
                    <c:forEach items="${foods}" var="f">
                        <c:if test="${f.type_id==3}">
                            <div class="col-lg-4 col-md-6">
                                <div class="single-item-wrap">
                                    <div class="thumb">
                                        <img src="${f.photo}" alt="img">
                                        <c:set var="bian" value="0"/>
                                        <c:forEach items="${love}" var="love">
                                            <c:if test="${love.customer_id == user.id && love.food_id == f.ID}">
                                                <c:set var="bian" value="1"/>
                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${bian == '1'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin1"></span>
                                            </a>
                                        </c:if>
                                        <c:if test="${bian == '0'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin"></span>
                                            </a>
                                        </c:if>
                                    </div>
                                    <div class="wrap-details">
                                        <h5>
                                            <a href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">${f.name}</a>
                                        </h5>
                                        <div class="wrap-footer">
                                            <div class="rating" id="rating${f.ID}">
                                                4.9
                                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                                <c:forEach items="${likes}" var="l">
                                                    <c:if test="${l.food_id==f.ID}">
                                                        <p>(<span id="likeNum${f.ID}">${f.like}</span>)</p>
                                                    </c:if>
                                                </c:forEach>
                                            </div>
                                            <h6 class="price">$${f.price}</h6>
                                        </div>
                                    </div>
                                    <div class="btn-area">
                                        <a class="btn btn-secondary"
                                           href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">选择选项</a>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
            <div class="tab-pane fade" id="french-fry" role="tabpanel" aria-labelledby="pills-french-fry-tab">
                <div class="row justify-content-center">
                    <c:forEach items="${foods}" var="f">
                        <c:if test="${f.type_id==4}">
                            <div class="col-lg-4 col-md-6">
                                <div class="single-item-wrap">
                                    <div class="thumb">
                                        <img src="${f.photo}" alt="img">
                                        <c:set var="bian" value="0"/>
                                        <c:forEach items="${love}" var="love">
                                            <c:if test="${love.customer_id == user.id && love.food_id == f.ID}">
                                                <c:set var="bian" value="1"/>
                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${bian == '1'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin1"></span>
                                            </a>
                                        </c:if>
                                        <c:if test="${bian == '0'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin"></span>
                                            </a>
                                        </c:if>
                                    </div>
                                    <div class="wrap-details">
                                        <h5>
                                            <a href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">${f.name}</a>
                                        </h5>
                                        <div class="wrap-footer">
                                            <div class="rating" id="rating${f.ID}">
                                                4.9
                                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                                <c:forEach items="${likes}" var="l">
                                                    <c:if test="${l.food_id==f.ID}">
                                                        <p>(<span id="likeNum${f.ID}">${f.like}</span>)</p>
                                                    </c:if>
                                                </c:forEach>
                                            </div>
                                            <h6 class="price">$${f.price}</h6>
                                        </div>
                                    </div>
                                    <div class="btn-area">
                                        <a class="btn btn-secondary"
                                           href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">选择选项</a>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
            <div class="tab-pane fade" id="fast-food" role="tabpanel" aria-labelledby="pills-fast-food-tab">
                <div class="row justify-content-center">
                    <c:forEach items="${foods}" var="f">
                        <c:if test="${f.type_id==5}">
                            <div class="col-lg-4 col-md-6">
                                <div class="single-item-wrap">
                                    <div class="thumb">
                                        <img src="${f.photo}" alt="img">
                                        <c:set var="bian" value="0"/>
                                        <c:forEach items="${love}" var="love">
                                            <c:if test="${love.customer_id == user.id && love.food_id == f.ID}">
                                                <c:set var="bian" value="1"/>
                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${bian == '1'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin1"></span>
                                            </a>
                                        </c:if>
                                        <c:if test="${bian == '0'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin"></span>
                                            </a>
                                        </c:if>
                                    </div>
                                    <div class="wrap-details">
                                        <h5>
                                            <a href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">${f.name}</a>
                                        </h5>
                                        <div class="wrap-footer">
                                            <div class="rating" id="rating${f.ID}">
                                                4.9
                                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                                <c:forEach items="${likes}" var="l">
                                                    <c:if test="${l.food_id==f.ID}">
                                                        <p>(<span id="likeNum${f.ID}">${f.like}</span>)</p>
                                                    </c:if>
                                                </c:forEach>
                                            </div>
                                            <h6 class="price">$${f.price}</h6>
                                        </div>
                                    </div>
                                    <div class="btn-area">
                                        <a class="btn btn-secondary"
                                           href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">选择选项</a>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
            <div class="tab-pane fade" id="drinks" role="tabpanel" aria-labelledby="pills-drinks-tab">
                <div class="row justify-content-center">
                    <c:forEach items="${foods}" var="f">
                        <c:if test="${f.type_id==6}">
                            <div class="col-lg-4 col-md-6">
                                <div class="single-item-wrap">
                                    <div class="thumb">
                                        <img src="${f.photo}" alt="img">
                                        <c:set var="bian" value="0"/>
                                        <c:forEach items="${loves}" var="love">
                                            <c:if test="${love.customer_id == user.id && love.food_id == f.ID}">
                                                <c:set var="bian" value="1"/>
                                            </c:if>
                                        </c:forEach>
                                        <c:if test="${bian == '1'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin1"></span>
                                            </a>
                                        </c:if>
                                        <c:if test="${bian == '0'}">
                                            <a class="fav-btn" href="javascript:void(0)" id="food${f.ID}">
                                                <span class="iconfont icon-aixin"></span>
                                            </a>
                                        </c:if>
                                    </div>
                                    <div class="wrap-details">
                                        <h5>
                                            <a href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">${f.name}</a>
                                        </h5>
                                        <div class="wrap-footer">
                                            <div class="rating" id="rating${f.ID}">
                                                4.9
                                                <span class="rating-inner">
                                        <i class="ri-star-fill ps-0"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-fill"></i>
                                        <i class="ri-star-half-line pe-0"></i>
                                    </span>
                                                <c:forEach items="${likes}" var="l">
                                                    <c:if test="${l.food_id==f.ID}">
                                                        <p>(<span id="likeNum${f.ID}">${f.like}</span>)</p>
                                                    </c:if>
                                                </c:forEach>
                                            </div>
                                            <h6 class="price">$${f.price}</h6>
                                        </div>
                                    </div>
                                    <div class="btn-area">
                                        <a class="btn btn-secondary"
                                           href="foods.let?type=findId&foodId=${f.ID}&typeId=${f.type_id}&pageIndex=1">选择选项</a>
                                    </div>
                                </div>
                            </div>
                        </c:if>
                    </c:forEach>
                </div>
            </div>
        </div>
    </div>
</section>


<script>
    $(function () {
        $("#pills-tabContent").on("click", "div div div div div  a", function () {
            let foodId = $(this).prop("id")
            let customerId = $("#userId").val();
            let spanId = "#" + foodId + " span"

            let like = "#likeNum" + foodId;
            let rating = "#rating" + foodId;
            let ratingP = "#rating" + foodId + " p";
            foodId = parseInt(foodId.replace(/[^0-9]/ig, ""));
            $.ajax({
                url: "${pageContext.request.contextPath}/foods.let?type=foodGiveLike",
                type: "post",
                data: {
                    customerId: customerId,
                    foodId: foodId
                },
                success: function (data) {
                    if (data === "yes") {
                        $(spanId).attr("class", "iconfont icon-aixin1");
                        if ($(like).length > 0) {
                            let likeNum = parseInt($(like).text())
                            $(like).html(likeNum + 1)
                        } else {
                            $(rating).append("<p>(<span id='temp'>1</span>)</p>")
                            $("#temp").attr("id", like)
                        }
                    } else {
                        $(spanId).attr("class", "iconfont icon-aixin")
                        if ($(like).length > 0) {
                            let likeNum = parseInt($(like).text())
                            $(like).html(likeNum - 1)
                        } else {
                            $(ratingP).remove()
                        }
                    }

                }
            })
        })
    })
</script>
<!-- product Area End -->

<!-- subscribe Area Start-->
<section class="subscribe-area pd-bottom-150"
         style="background-image: url(${pageContext.request.contextPath}/assets/img/other/location.png);">
    <div class="overlay"></div>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-8 col-lg-9 col-md-10">
                <div class="section-title text-center">
                    <h3 class="sub-title text-secondary">我们的位置</h3>
                    <h2 class="title text-white">在您所在地区找到Foodka商店</h2>
                    <form>
                        <div class="single-input-wrap mb-0 with-btn">
                            <input type="email" placeholder="Zip code or state providence">
                            <button class="btn btn-base">请参阅位置</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- subscribe Area End -->

<!-- testimonial Area Start-->
<section class="testimonial-area text-center">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-7 col-md-10">
                <div class="testimonial-slider owl-carousel">
                    <div class="item">
                        <div class="testimonial-wrap">
                            <p>"我们无怨无悔！"。我不知道还能说什么。它真的为我节省了时间和精力。食物正是我们的业务所缺乏的"</p>
                            <h3>Julia R. Davis
                            </h3>
                            <h6>Food Bloger</h6>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial-wrap">
                            <p>"我们无怨无悔！"。我不知道还能说什么。它真的为我节省了时间和精力。食物正是我们的业务所缺乏的"</p>
                            <h3>戴维斯·J·鲁里亚（Davis J. Rulia）
                            </h3>
                            <h6>美食博主</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- testimonial Area End -->

<!-- blog Area Start-->
<section class="blog-area pd-bottom-90">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-xl-5 col-lg-7">
                <div class="section-title text-center">
                    <h3 class="sub-title">新闻与博客</h3>
                    <h2 class="title">庆祝食物的敬畏.</h2>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-lg-4 col-md-6">
                <div class="single-blog-wrap">
                    <div class="thumb">
                        <img src="${pageContext.request.contextPath}/assets/img/blog/1.png" alt="img">
                    </div>
                    <div class="wrap-details">
                            <span class="cat">
                                <span class="date">
                                    <i class="ri-calendar-todo-fill"></i>2021年7月14日
                                </span>
                            <a href="#" class="tag me-0">
                                    <i class="ri-price-tag-3-fill"></i>伯尔加
                                </a>
                            </span>
                        <h5><a href="blog-details.jsp">希腊酸奶早餐碗配浇头</a></h5>
                        <div class="wrap-hover-area">
                            <p> 它只加了一点酱汁。酱汁的翻版，更像是外卖的美国中国宫保的风格。酱汁使它非常适合与米饭一起吃。
                            </p>
                            <a class="link-btn" href="blog-details.jsp">阅读更多</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-blog-wrap">
                    <div class="thumb">
                        <img src="${pageContext.request.contextPath}/assets/img/blog/2.png" alt="img">
                    </div>
                    <div class="wrap-details">
                            <span class="cat">
                                <span class="date">
                                    <i class="ri-calendar-todo-fill"></i>2021年7月5日
                                </span>
                            <a href="#" class="tag me-0">
                                    <i class="ri-price-tag-3-fill"></i>披萨
                                </a>
                            </span>
                        <h5><a href="blog-details.jsp">蚕豆、西红柿、大蒜和奶酪烤饼
                        </a></h5>
                        <div class="wrap-hover-area">
                            <p> 它只加了一点酱汁。酱汁的翻版，更像是外卖的美国中国宫保的风格。酱汁使它非常适合与米饭一起吃。
                            </p>
                            <a class="link-btn" href="blog-details.jsp">阅读更多</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="single-blog-wrap">
                    <div class="thumb">
                        <img src="${pageContext.request.contextPath}/assets/img/blog/3.png" alt="img">
                    </div>
                    <div class="wrap-details">
                            <span class="cat">
                                <span class="date">
                                    <i class="ri-calendar-todo-fill"></i>2021年8月14日
                                </span>
                            <a href="#" class="tag me-0">
                                    <i class="ri-price-tag-3-fill"></i>披萨
                                </a>
                            </span>
                        <h5><a href="blog-details.jsp">在家制作正宗的意大利玛格丽特披萨
                        </a></h5>
                        <div class="wrap-hover-area">
                            <p> 它只加了一点酱汁。酱汁的翻版，更像是外卖的美国中国宫保的风格。酱汁使它非常适合与米饭一起吃。
                            </p>
                            <a class="link-btn" href="blog-details.jsp">阅读更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- blog Area End -->

<!-- footer area start -->
<footer class="footer-area pd-top-100">
    <div class="footer-inner padding-top-100 padding-bottom-65">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget">
                        <div class="logo">
                            <img src="${pageContext.request.contextPath}/assets/img/logo.png" alt="img">
                        </div>
                        <ul class="contact_info_list">
                            <li class="single-info-item">
                                <img src="${pageContext.request.contextPath}/assets/img/icon/location.png" alt="icon">
                                <div class="details">
                                    4920 Trails End Road Ft 美国，佛罗里达州 33311
                                </div>
                            </li>
                            <li class="single-info-item">
                                <img src="${pageContext.request.contextPath}/assets/img/icon/envelope.png" alt="icon">
                                <div class="details">
                                    ordernow@foodka.com
                                </div>
                            </li>
                            <li class="single-info-item">
                                <img src="${pageContext.request.contextPath}/assets/img/icon/phone.png" alt="icon">
                                <div class="details">
                                    +997 509 153 849
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_link">
                        <h4 class="widget-title">热门菜单</h4>
                        <ul>
                            <li><a href="menu-list.jsp">汉堡王沃珀</a></li>
                            <li><a href="menu-list.jsp">五个家伙芝士汉堡</a></li>
                            <li><a href="menu-list.jsp">肯德基原始食谱鸡</a></li>
                            <li><a href="menu-list.jsp">温迪的霜冻</a></li>
                            <li><a href="menu-list.jsp">麦当劳的快乐餐</a></li>
                            <li><a href="menu-list.jsp">多米诺的意大利辣香肠比萨饼</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_link">
                        <h4 class="widget-title">营业时间</h4>
                        <ul>
                            <li>星期一 : 09.00am-10.00pm</li>
                            <li>星期二 : 09.00am-10.00pm</li>
                            <li>星期三 : 09.00am-10.00pm</li>
                            <li>星期四 : 09.00am-10.00pm</li>
                            <li>星期五 : 09.00am-10.00pm</li>
                            <li>星期六 & 星期天 : <span>Closed</span></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <div class="footer-widget widget widget_instagram_feeds">
                        <h4 class="widget-title">Instagram提要</h4>
                        <ul>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/1.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/2.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/3.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/4.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/5.png" alt="instagram" /></a></li>
                            <li><a href="#"><img src="${pageContext.request.contextPath}/assets/img/instagram/6.png" alt="instagram" /></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-md-start text-center">
                    <div class="copyright-area">
                        <p>© 2021年Foodka。Themefie保留所有权利</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <ul class="social-area text-md-end text-center mt-md-0 mt-2">
                        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        <li><a href="#"><i class="fab fa-behance"></i></a></li>
                        <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</footer>
<!-- footer area end -->

<!-- back-to-top end -->
<div class="back-to-top">
    <span class="back-top"><i class="fas fa-angle-double-up"></i></span>
</div>


<!-- all plugins here -->
<script src="${pageContext.request.contextPath}/assets/js/jquery.3.6.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/imageloded.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/counterup.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/waypoint.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/magnific.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/isotope.pkgd.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/jquery-ui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/nice-select.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/fontawesome.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/owl.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/slick-slider.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/wow.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/tweenmax.min.js"></script>
<!-- main js  -->
<script  src="${pageContext.request.contextPath}/assets/js/main.js"></script>
</body>
<script>
    $(function () {
        $("#foodsWrap").on("click", "div div div#thumb a", function () {

            let foodId = $(this).prop("id")
            let customerId = $("#userId").val();
            let spanId = "#" + foodId + " span"
            let like = "#likeNum" + foodId;
            let rating = "#rating" + foodId;
            let ratingP = "#rating" + foodId + " p";

            $.ajax({
                url: "${pageContext.request.contextPath}/foods.let?type=foodGiveLike",
                type: "post",
                data: {
                    customerId: customerId,
                    foodId: foodId
                },
                success: function (data) {
                    if (data === "yes") {
                        $(spanId).attr("class", "iconfont icon-aixin1");
                        if ($(like).length > 0) {
                            let likeNum = parseInt($(like).text())
                            $(like).html(likeNum + 1)
                        } else {
                            $(rating).append("<p>(<span id='temp'>1</span>)</p>")
                            $("#temp").attr("id", like)
                        }
                    } else {
                        $(spanId).attr("class", "iconfont icon-aixin")
                        if ($(like).length > 0) {
                            let likeNum = parseInt($(like).text())
                            $(like).html(likeNum - 1)
                        } else {
                            $(ratingP).remove()
                        }
                    }

                }
            })
        })
    })
</script>
</html>